<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flat和flatMap方法</title>
</head>
<body>
  <script>
    /**
     * 数组的成员有时还是数组，Array.prototype.flat用于将嵌套的数组“拉平”
     * 变成一维数组。该方法返回一个新数组，对原数据没有影响
    */
   [1,2,[3,4]].flat();
   // [1,2,3,4]
   // flat()默认只会拉平一层，如果要拉平多层嵌套数组，可以将flat()方法的参数，写成一个整数，表示想要拉平的层数，默认为1
   [1, 2, [3, [4, 5]]].flat();
   // [1, 2, 3, [4, 5]]
   [1, 2, [3, [4, 5]]].flat(2);
   // [1, 2, 3, 4, 5]
   //如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。
   [1, [2, [3]]].flat(Infinity);
   // [1, 2, 3]
   //如果原数组有空位，flat()方法会跳过空位。
   [1, 2, , 4, 5].flat();
   // [1, 2, 4, 5]
  </script>
  <script>
    // flatMap方法对原数组的每个成员执行一个函数，相当于执行Array.prototype.map(), 然后对返回值组成的数组，执行flat方法。
    // 该 方法返回一个新数组，不会改变原数组。
    var a = [2,3,4].flatMap((x) => [x, x * 2]);
    console.log(a) // // [2, 4, 3, 6, 4, 8]
    // flatMap只能展开一层数组。
    var b = [1,2,3,4].flatMap(x => [[x * 2]]);
    console.log(b) // // [[2], [4], [6], [8]]
    /**
     * 上面代码中，遍历函数返回的是一个双层的数组，但是默认只能展开一层，
     * 因此，flatMap返回的还是一个嵌套数组。
     *
     * flatMap()方法的参数是一个遍历函数，该函数可以接受三个参数。
     * 分别是，当前数组成员，当前数组成员的位置(从零开始)，原数组
    */
   arr.flatMap(function(val, index, arr) {
    //code
   }, obj)
   // 同时还可以有第二个参数，用来绑定遍历函数里面的this
  </script>
</body>
</html>